<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">卡片编辑</block>
		</cu-custom>
		
		<block >
			<view class="whole-box">
				<view class="gold-black-box">
					
					<view class="top-box">
						<image class="top-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
						<view class="top-box-content">
							<image class="bg-logo"></image>
							<text class="page-title">{{title}}</text>
							
						</view>
					</view>
					
					<view class="my-data-box" :class="'payment_ic'+withdraw_mode">
						<image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
						
						<view class="my-data-box-content">
							<view class="input-line">
								<text>持卡人</text>
								<input type="text" placeholder="请输入持卡人姓名" placeholder-class="input-holder"  v-model="formData.realname"/>
							</view>
							<view class="input-line">
								<text>卡号</text>
								<input type="text" placeholder="请填写卡号" placeholder-class="input-holder"  v-model="formData.account_number"/>
							</view>
							<view class="input-line">
								<text>银行</text>
								<input type="text" placeholder="请输入银行名称" placeholder-class="input-holder"  v-model="formData.bank_name"/>
							</view>
							<view class="input-line">
								<text>身份证号码</text>
								<input type="text" placeholder="请填写身份证号码" placeholder-class="input-holder"  v-model="formData.idcard"/>
							</view>
							<view class="input-line">
								<text>预留手机号</text>
								<input type="number" placeholder="请填写银行卡预留手机号" placeholder-class="input-holder"  v-model="formData.mobile"/>
							</view>
							<!-- <view class="input-line">
								<text>信用卡过期时间（信用卡必填）</text>
								<input type="text" placeholder="请填写信用卡过期时间" placeholder-class="input-holder"  v-model="formData.credit_time"/>
							</view>
							<view class="input-line">
								<text>信用卡CVV2（信用卡必填）</text>
								<input type="text" placeholder="请填写信用卡CVV2" placeholder-class="input-holder"  v-model="formData.credit_cvv2"/>
							</view> -->
							<view class="input-line">
								<text >卡片类型：</text>
								<input type="text" value="暂只支持储蓄卡支付" disabled="true">
								<!-- <radio-group class="block" @change="RadioChange">
									<radio style="color: #B8AC97;margin-right: 10px;" :class="formData.type=='0'?'checked':''" :checked="formData.type=='0'?true:false"
									 value="0"> 银行卡</radio>
									<radio style="color: #B8AC97;margin-right: 80px;"  :class="formData.type=='1'?'checked':''" :checked="formData.type=='1'?true:false"
									 value="1"> 信用卡</radio>
								
								</radio-group> -->
							</view>
							<view class="input-line">
								<text >是否默认：</text>
								<switch @change="SwitchChange" :class="formData.is_default==1?'checked':''" :checked="formData.is_default==1?true:false"></switch>
							</view>
						</view>
					</view>
					
					<view class="submit-btn" :class="'bg-'+theme" @tap="onSubmit">保存/签约卡片</view>
					
				</view>
			</view>
		</block>
		<view class="cu-modal" :class="modalName=='passwordModal'?'show':''">
		   <view class="cu-dialog bg-white">
			<view class="cu-bar  justify-end">
			 <view class="content">请输入验证码</view>
			 <view class="action" @tap="closeKf">
			  <text class="cuIcon-close text-red"></text>
			 </view>
			</view>
			<view class="padding-xl">
			 <form>
			  <view class="cu-form-group margin-top" style="border: 1px solid #CCCCCC;">
			   <view class="title">验证码</view>
			   <input v-model="codeData.code" type="text" placeholder="请输入验证码" name="input"></input>
			  </view>
			 </form>
			 <view class="cu-btn bg-red round margin-top xl w100" @tap="checkKf">确定签约</view>
			</view>
		   </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				member: null,
				preview: null,
				// CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				formData: {
					id:0,
					realname: '',
					mobile: '',
					account_number: '',
					bank_name: '',
					idcard: '',
					mobile:'',
					credit_time:'',
					credit_cvv2:'',
					is_default:0,
					type:0,
				},
				codeData: {
					id:0,
					code: ''
				},
				
				type:'money',
				password:'',

				title: '卡片编辑',
				modalName: '',
				withdraw_mode: 0,
				paymentPicker: [
					{
						name:'微信',
						icon: '../../../static/cash_wx.png',
						icon_cur: '../../../static/cash_wx_cur.png',
					},
					{
						name:'银行卡',
						icon: '../../../static/cash_card.png',
						icon_cur: '../../../static/cash_card_cur.png',
					},
					{
						name:'支付宝',
						icon: '../../../static/cash_ali.png',
						icon_cur: '../../../static/cash_ali_cur.png',
					},
				],
			}
		},
		onLoad(options) {
			if (options.id) {
				this.formData.id = options.id
				
			}
			if (this.$common.loginAuth(true)) {}
		},
		onShow() {
			if (this.$common.loginAuth(true)) {
				this.$common.getMember().then((member) => {
					this.member = member
					
					this.getDetail()
				})
			}
			// this.modalName = 'passwordModal'
		},
		methods: {
			closeKf(){
				this.modalName = ''
			},
			SwitchChange(e){
				if(e.detail.value){
					this.formData.is_default = 1
				} else  this.formData.is_default = 0
			},
			RadioChange(e) {
				this.formData.type = e.detail.value
			},
			checkKf(){
				let formData = this.formData
				uni.showLoading({
					title: '处理中'
				})
				let codeData = this.codeData;
				codeData.id = formData.id
				this.$http
					.post('card_contract', codeData)
					.then((response) => {
						uni.hideLoading()
						console.log(response)
						if(response.data.data.status == 200) {
							this.$common.showSuccess('签约成功', (r) => {
								
								this.getDetail()
								uni.hideLoading()
								uni.navigateTo({
									'url' : '/pages/member/card/card'
								})
							})
						} else {
							this.$common.showError('签约失败')
						}
						
					})
				.catch((response) => {
					uni.hideLoading()
				})
			},
			onSubmit() {
				let formData = this.formData
				if (formData.cash <= 0) {
					this.$common.showError('请输入提现金额')
					return
				}
				
				
				if (!formData.realname.trim()) {
					this.$common.showError('请填写姓名')
					return
				}
				if (!formData.mobile.trim()) {
					this.$common.showError('请填写手机号')
					return
				}
				if (!formData.account_number.trim()) {
					this.$common.showError('请输入银行卡号')
					return
				}
				if (!formData.bank_name.trim()) {
					this.$common.showError('请输入开户行名称')
					return
				}
				if (!formData.idcard.trim()) {
					this.$common.showError('请输入银行名称')
					return
				}
				
				if (formData.type == 1) {
					if (!formData.credit_time.trim()) {
						this.$common.showError('请输入信用卡过期时间')
						return
					}
					if (!formData.credit_cvv2.trim()) {
						this.$common.showError('请输入信用卡cvv2')
						return
					}
				}
				
				if(this.checkLoading) return
				
				// this.checkLoading = true
				uni.showLoading({
					title: '处理中'
				})
				this.$http
					.post('card_save', formData)
					.then((response) => {
						uni.hideLoading()
						console.log(response)
						if(response.data.data.mch_order_no != '' && response.data.data.status == 200) {
							this.modalName = 'passwordModal'
						}
						if(response.data.data.mch_order_no == '' && response.data.data.status == 200) {
							this.$common.showSuccess('修改成功', (r) => {
								this.getDetail()
								uni.hideLoading()
								uni.navigateTo({
									'url' : '/pages/member/card/card'
								})
							})
						}
						
					})
				.catch((response) => {
					uni.hideLoading()
				})
				
			},
			getDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$http
					.get('card_edit', {
						id:this.formData.id
					})
					.then((response) => {
						this.preview = response.data.data
						let pr = this.preview
						this.formData.realname = pr.realname
						this.formData.account_number = pr.account_number
						this.formData.idcard = pr.idcard
						this.formData.bank_name = pr.bank_name
						this.formData.mobile = pr.mobile
						this.formData.credit_time = pr.credit_time
						this.formData.credit_cvv2 = pr.credit_cvv2
						this.formData.type = pr.type
						this.formData.is_default = pr.is_default
						uni.hideLoading()
					})
					.catch((response) => {
						uni.hideLoading()
					})

			},
			setAll() {
				this.formData.cash = this.preview.account.user_money
			},
			PaymentPickerChange(i) {
				console.log(i)
				this.withdraw_mode = parseInt(i)
			},
		},
	}
</script>

<style>
	.payment_ic0{
		height: 860rpx!important;
	}
	.payment_ic2{
		height: 660rpx!important;
	}
	.whole-box{
		background-color: #333333;
		min-height: calc(100vh - 45px - 24px);
		padding: 12px 0;
	}
	.gold-black-box{
		padding: 12px 0;
		margin: 0 10rpx;
		border: 2rpx solid #999999;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.gold-black-box .top-box{
		/* margin-top: 25rpx; */
		width: 690rpx;
		height: 160rpx;
		border: 2rpx solid #999999;
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
	}
	.top-box .top-box-bg{
		width: 100%;
		height: 100%;
	}
	.top-box .top-box-content{
		width: 690rpx;
		/* height: 160rpx; */
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.top-box-content .bg-logo{
		width: 196rpx;
		height: 54rpx;
		padding-left: 20rpx;
	}
	.top-box-content .page-title{
		padding-left: 40rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #B8AC97;
	}
	
	.top-box-content .data-box{
		padding: 0 40rpx;
		width: 100%;
		margin-bottom: 10rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.data-box view{
		width: 33.33%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.data-box view image{
		width: 40rpx;
		height: 90rpx;
	}
	.data-box view text{
		margin-top: 10rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #E5D4B9;
	}
</style>

<style>
	.gold-black-box .my-data-box{
		margin-top: 12px;
		width: 690rpx;
		height: 1000rpx;
		border: 2rpx solid #999999;
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
	}
	.my-data-box .my-data-box-bg{
		width: 100%;
		height: 100%;
	}
	.my-data-box .my-data-box-content{
		width: 690rpx;
		/* height: 336rpx; */
		position: absolute;
		left: 0;
		top: 0;
		/* display: flex;
		justify-content: space-between;
		align-items: center; */
		/* padding: 0 40rpx; */
		padding-bottom: 20rpx;
	}
	.my-data-box-content .input-line{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 28rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}
	.input-line text{
		width: 170rpx;
		flex-shrink: 0;
		margin-right: 10rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #B8AC97;
		
	}
	.input-line input{
		flex: 1;
		font-size: 30rpx;
		color: #B8AC97;
		
	}
	.input-holder{
		font-size: 30rpx;
		color: #B8AC97;
	}
	
	.my-data-box-content .tips{
		padding: 20rpx 28rpx 0;
		font-size: 26rpx;
		color: #B8AC97;
		opacity: 0.84;
	}
	.tips text{
		margin-left: 10rpx;
	}
	
	.gold-black-box .submit-btn{
		width: 690rpx;
		margin-top: 60rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background: #E9B475;
		border-radius: 45rpx;
		font-size: 30rpx;
		color: #000000;
	}
</style>
